<template>
	<view class="page">
		<wd-navbar title="聊天皮肤" fixed placeholder left-arrow safeAreaInsetTop custom-class="nav" :bordered="false" @click-left="handleClickLeft"></wd-navbar>
		<view class="wallpaper_list">
			<view class="wallpaper_item xf_box">
				<wd-img src="/static/assets/my/xf.png" width="50" height="50"></wd-img>
				<wd-gap height="15rpx"></wd-gap>
				<wd-text text="壁纸/锁屏修复" color="#1E1E1E" size="20px"></wd-text>
				<wd-gap height="15rpx"></wd-gap>
				<wd-text text="壁纸自动消失?" color="#848484" size="16px"></wd-text>
				<wd-text text="点此恢复" color="#848484" size="16px"></wd-text>
			</view>
			<view class="wallpaper_item">
				<image style="width: 100%; height: 100%;" mode="aspectFill" src="http://124.223.41.167:8080/mobile/static/images/bimg1.png"></image>
				<view class="mask_info_box">
					<text>默认壁纸</text>
					<wd-img width="15" height="15" src='/static/assets/my/del.png'></wd-img>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { toRouter } from "@/hooks/utils";
import { reactive, onMounted } from 'vue';
const state = reactive({
	list: []
})
const handleClickLeft = function handleClickLeft() {
  uni.navigateBack()
}
const initList = ()=> {
	uni.request({
		url: '/api/wallpaper/download/list'
	}).then(res=>{
		state.list = res.data
	})
}
onMounted(()=>{
	initList()
})
</script>

<style lang="scss" scoped>
:deep(.nav) {
	background: rgb(245, 245, 245) url("http://124.223.41.167:8080/mobile/static/images/bg.png") no-repeat top left/100% auto;
}
.page {
	position: relative;
	&:before {
		content: '';
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		background: rgb(245, 245, 245) url("http://124.223.41.167:8080/mobile/static/images/bg.png") no-repeat top left/100%;
		z-index: -1;
	}
}
.wallpaper_list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 15px;
	padding: 40rpx;
	.wallpaper_item {
		position: relative;
		overflow: hidden;
		font-size: 0;
		border-radius: 8px;
		height: 630rpx;
		.mask_info_box {
			position: absolute;
			left: 0;
			bottom: 0;
			right: 0;
			background: rgba(0,0,0,.4);
			color: #fff;
			padding: 20rpx;
			box-sizing: border-box;
			font-size: 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		&.xf_box {
			display: flex;
			flex-flow: column;
			justify-content: center;
			align-items: center;
			background: #EEEEEE;
		}
	}
}
	
</style>
